<template>
	<div class="divmain" style="padding: 0px 20px 0px 20px;display: block;height: 100%;">
		<div ref="divForm" style="padding: 20px 0px;">
			<el-form inline :model="formData">
				<el-row>
					<el-col :span="24">
						<el-form-item label="项目编号">
							<el-input placeholder="请输入项目编号" v-model="formData.SystemInvoiceNumer"></el-input>
						</el-form-item>
						<el-form-item label="项目:">
							<el-select v-model="formData.SystemInvoiceProjectId" style="width: 100%;" placeholder="请选择项目" clearable filterable @change="projectChange">
								<el-option v-for="item in ProjectList" :value="item.Id"  v-show="!item.Delete"
									:label="item.ProjectName"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="甲方:">
							<el-select v-model="formData.PartyA" style="width: 100%;" placeholder="请选择甲方" clearable filterable>
								<el-option v-for="item in SupplierList" :value="item.Id"  v-show="!item.Delete"
									:label="item.Name"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="开票方:">
							<el-select v-model="formData.SystemCompanyId" style="width: 100%;" placeholder="请选择开票方" clearable filterable>
								<el-option v-for="item in CompanyList" :value="item.Id"  v-show="!item.Delete"
									:label="item.CompanyName"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="开票金额">
							<el-input placeholder="请输入开票金额" type="number" v-model="formData.SystemInvoiceAmount"></el-input>
						</el-form-item>
						<el-form-item label="收款金额">
							<el-input placeholder="请输入收款金额" type="number" v-model="formData.SystemInvoiceIn"></el-input>
						</el-form-item>
						<el-form-item label="开票开始">
							<el-date-picker v-model="formData.StartDate" value-format="yyyy-MM-dd" clearable></el-date-picker>
						</el-form-item>						
						<el-form-item label="开票结束">
							<el-date-picker v-model="formData.EndDate" value-format="yyyy-MM-dd"  clearable></el-date-picker>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="getTableData">查询</el-button>
						</el-form-item>						
					</el-col>
				</el-row>
				<el-row>
					<el-col>
						<el-form-item>
							<el-button type="success" @click="dialogAddForm.show = true">新建</el-button>
							<el-button type="primary" @click="ExportAllHandler">导出全部数据</el-button>
							<el-button type="warning" @click="ExportByGetListHandler">导出筛选数据</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div :style="tableHeight">
			<el-table ref="componentsRef" height="100%" :data="tableData" border show-summary :summary-method="getSummaries" v-loading="pagination.loading">
				<el-table-column type="selection" width="50" align="center"></el-table-column>
				<el-table-column type="index" label="序号" width="50" align="center"
					:index="indexMethod"></el-table-column>
				<el-table-column label="开票编号" align="center" prop="SystemInvoiceNumer" width="220"></el-table-column>
				<el-table-column label="开票时间" align="center" prop="SystemInvoiceTime" width="220">
					<template slot-scope="scope">
						{{ timeFormat(scope.row.SystemInvoiceTime) }}
					</template>
				</el-table-column>
				<el-table-column label="项目" align="center" prop="BankId" width="220">
					<template slot-scope="scope">
						{{ getMessage(scope.row,'Project')!=undefined?getMessage(scope.row,'Project').ProjectName:'' }}
					</template>
				</el-table-column>
				<el-table-column label="甲方" align="center" prop="BankId" width="220">
					<template slot-scope="scope">
						{{ getMessage(scope.row,'Supplier')!=undefined? getMessage(scope.row,'Supplier').Name:'' }}
					</template>
				</el-table-column>
				<el-table-column label="开票方" align="center" prop="BankId">
					<template slot-scope="scope">
						{{ getMessage(scope.row,'Company')!=undefined?getMessage(scope.row,'Company').CompanyName:'' }}
					</template>
				</el-table-column>
				<el-table-column label="开票金额" align="center" prop="SystemInvoiceAmount" width="220"></el-table-column>
				<el-table-column label="收款金额" align="center" prop="SystemInvoiceIn" width="220"></el-table-column>
				<el-table-column label="收款时间" align="center" prop="InvoiceOutTime" width="220">
					<template slot-scope="scope">
						{{ timeFormat(scope.row.InvoiceOutTime) }}
					</template>
				</el-table-column>
				<el-table-column label="未收款款金额" align="center" prop="wsk" width="220"></el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button plain type="primary" size="mini" style="margin-left: 10px;" @click="dialogUpdataFormEvent(scope.row)">详情</el-button>
						<el-popconfirm title="这是一段内容确定删除吗" @confirm="deletePayrollDetails(scope.row)"
							style="padding-left: 10px;">
							<el-button slot="reference" plain type="danger" size="mini">删除</el-button>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<el-row>
				<el-col :span="24" align="right"> 
					<el-pagination @size-change="getTableData" @current-change="getTableData"
						:current-page.sync="pagination.currentPage" :page-sizes="pagination.pagesizes"
						:page-size.sync="pagination.pagesize" layout="total, sizes, prev, pager, next, jumper"
						:total.sync="pagination.total">
					</el-pagination>
				</el-col>
			</el-row>
		</div>
		<el-dialog :visible.sync="dialogAddForm.show" :title="dialogAddForm.title" @close="dialogAddFormCloseEvent">
			<AddInvoice :closeFun="closeFun" :CompanyList="CompanyList" :ProjectList="ProjectList" :SupplierList="SupplierList" ref="AddInvoiceRef"></AddInvoice>
		</el-dialog>
		<el-dialog :visible.sync="dialogUpdataForm.show" :title="dialogUpdataForm.title">
			<UpInvoice :closeFun="closeFun" :CompanyList="CompanyList" :ProjectList="ProjectList" :SupplierList="SupplierList" :updata="dialogUpdataForm.updata" ref="UpdataBankInfoRef"></UpInvoice>
		</el-dialog>
	</div>
</template>

<script>
	import AddInvoice from './AddInvoice.vue'
	import UpInvoice from './UpInvoice.vue'
	import * as dayjs from 'dayjs'
	export default {
		components: {
			AddInvoice,UpInvoice
		},
		data() {
			return {
				formData: {
					SystemInvoiceNumer:'',
					SystemInvoiceProjectId:'',  
					PartyA:'',
					SystemCompanyId:'',
					SystemInvoiceAmount:'',
					SystemInvoiceIn:'',
					StartDate:null,
					EndDate:null,
				},
				tableData: [],
				//分页数据绑定
				pagination: {
					loading:false,
					currentPage: 1,
					pagesizes: [100, 500, 1000, 3000],
					pagesize: 100,
					total: 0
				},
				dialogAddForm: {
					show: false,
					title: '新建发票'
				},
				dialogUpdataForm: {
					show: false,
					title: '修改发票详情',
					updata:{},
				},
				selectData:[],
				ProjectList:[],
				CompanyList:[],
				SupplierList:[],
				tableHeight:'',
			}
		},
		created() {
			this.getProjectList()
			this.getCompanyList()
			this.getSupplierList()
		},
		mounted() {
			this.$nextTick(()=>{
				this.getTableData()
				this.getdivHeight()
			})
			window.addEventListener('resize',()=>{
				this.getdivHeight()
			})
		},
		updated() {
			this.$refs.componentsRef.doLayout()
		},
		methods: {
			//表格序号
			indexMethod(index) {
				return index + 1
			},
			getTableData() {
				this.pagination.loading = true
				this.$http.post('/api/SystemInvoice/GetList/query', {
					SystemInvoiceNumer: this.formData.SystemInvoiceNumer,
					SystemInvoiceProjectId: this.formData.SystemInvoiceProjectId==''? 0 : this.formData.SystemInvoiceProjectId,  
					PartyA:  this.formData.PartyA==''? 0 : this.formData.PartyA,
					SystemCompanyId:this.formData.SystemCompanyId==''? 0 : this.formData.SystemCompanyId,
					SystemInvoiceAmount:this.formData.SystemInvoiceAmount==''? 0 :  parseFloat(this.formData.SystemInvoiceAmount),
					SystemInvoiceIn: this.formData.SystemInvoiceIn==''? 0 : parseFloat(this.formData.SystemInvoiceIn),
					StartDate: (this.formData.StartDate!=''&&this.formData.StartDate!=null)?this.formData.StartDate: null,
					EndDate:(this.formData.EndDate!=''&&this.formData.EndDate!=null)?this.formData.EndDate:null,
					PageNumber: this.pagination.currentPage,
					PageSize: this.pagination.pagesize,
				}).then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) {
						this.tableData = Data.Data.map(x=>{
							return {
								wsk: (x.SystemInvoiceAmount - x.SystemInvoiceIn).toFixed(2),
								...x
							}
						})
					} else {
						this.tableData = []
						this.$message.warning(Message)
					}
					this.pagination.total = Data.Total
					setTimeout(()=>{
						this.pagination.loading = false
					},500)
				}).catch(()=>{
					setTimeout(()=>{
						this.pagination.loading = false
					},500)
				})
			},
			closeFun() {
				this.getTableData()
			},
			dialogAddFormCloseEvent(){
				this.$refs.AddInvoiceRef.resetFieldsEvent()
			},
			deletePayrollDetails(row){
				this.$http.post('/api/SystemInvoice/Delete/delete',{
					Ids:[row.Id]
				}).then(res=>{
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) {
						this.$message.success('删除成功')
						this.getTableData()
					} else {
						this.$message.warning(Message)
					}
				})
			},
			dialogUpdataFormEvent(row){
				this.dialogUpdataForm.updata = row	
				this.dialogUpdataForm.show = true	
			},
			getBankinfo() {
				this.$http.post('/api/Bankinfo/GetList/query', {
					key: '',
					PageNumber: 1,
					PageSize: 200,
				}).then(res => {
					const {
						StatusCode,
						Data
					} = res.data || 0
					if (StatusCode == 200) this.selectData = Data.Data
					else this.selectData = []
				})
			},
			getBankinfoList(row){
				let data = this.selectData.find(s=>s.Id == row)
				let result = []
				if(data !=undefined) result.push(data)			
				return result
			},
			getProjectList() {
				this.$http.post('/api/Values/GetProject').then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) this.ProjectList = Data.Data
					else this.ProjectList = []
				})
			},
			getCompanyList() {
				this.$http.post('/api/Values/GetCompany').then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) this.CompanyList = Data.Data
					else this.tableData = []
				})
			},
			getSupplierList() {
				this.loading = true
				this.$http.post('/api/Values/GetSupplier').then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) this.SupplierList = Data.Data
					else this.SupplierList = []
				})
			},
			getMessage(row,type){
				let obj = {}
				switch (type){
					case 'Company':
						obj = this.CompanyList.find(x=>x.Id == row.SystemCompanyId)
						break;
					case 'Project':
						obj = this.ProjectList.find(x=>x.Id == row.SystemInvoiceProjectId)
						break;
					case 'Supplier':
						obj = this.SupplierList.find(x=>x.Id == row.PartyA)
						break;					
				}
				return obj
			},
			//导出数据表格
			ExportByGetListHandler(row){
				this.$http.post('/api/SystemInvoice/ExportByGetList/ExportByGetList',{
					SystemInvoiceNumer: this.formData.SystemInvoiceNumer,
					SystemInvoiceProjectId: this.formData.SystemInvoiceProjectId==''? 0 : this.formData.SystemInvoiceProjectId,  
					PartyA:  this.formData.PartyA==''? 0 : this.formData.PartyA,
					SystemCompanyId:this.formData.SystemCompanyId==''? 0 : this.formData.SystemCompanyId,
					SystemInvoiceAmount:this.formData.SystemInvoiceAmount==''? 0 :  parseFloat(this.formData.SystemInvoiceAmount),
					SystemInvoiceIn: this.formData.SystemInvoiceIn==''? 0 : parseFloat(this.formData.SystemInvoiceIn),
					StartDate: (this.formData.StartDate!=''&&this.formData.StartDate!=null)?this.formData.StartDate: null,
					EndDate:(this.formData.EndDate!=''&&this.formData.EndDate!=null)?this.formData.EndDate:null,
					PageNumber: this.pagination.currentPage,
					PageSize: this.pagination.pagesize,
				}).then(res=>{
					const { StatusCode,Data,Message } = res.data || 0
					if(StatusCode == 200){
						//文件下载
						// publicjs.DownLoadFile({ ...Data })
						let path = Data.Message.replace(/\\/g,"/"); 
						window.location.href = this.$http.defaults.baseURL + "/" + path
					}else{
						this.$message.warning(Message)
					}
				})
			},
			//
			ExportAllHandler(){
				this.$http.post('/api/SystemInvoice/ExportAll/ExportAll').then(res=>{
					const { StatusCode,Data,Message } = res.data || 0
					if(StatusCode == 200){
						//文件下载
						// publicjs.DownLoadFile({ ...Data })
						let path = Data.Message.replace(/\\/g,"/"); 
						window.location.href = this.$http.defaults.baseURL + "/" + path
					}else{
						this.$message.warning(Message)
					}
				})
			},
			timeFormat(time){
				if(time != '' && time != '0001-01-01T00:00:00') return dayjs(time).format('YYYY-MM-DD')
				else return ''
			},
			//项目切换
			projectChange(value){
				let result = this.ProjectList.find(x=>x.Id == value)
				if(result != undefined){
					this.formData.PartyA = result.PartyA
					this.formData.SystemInvoiceNumer = result.ProjectNumber
				} else {
					this.formData.PartyA = ''
					this.formData.SystemInvoiceNumer = ''
				}
			},
			getSummaries(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '合计';
						return;
					}
					// if (index < 9 || index > 12) {
					// 	sums[index] = '';
					// 	return;
					// }
					const values = data.map(item => Number(item[column.property]));
					if (!values.every(value => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								let sumresult = parseFloat(prev) + parseFloat(curr)
								return sumresult.toFixed(2);
							} else {
								return prev.toFixed(2);
							}
						}, 0);
						sums[index] += ' 元';
					} else {
						sums[index] = '';
					}
				});
			
				return sums;
			},
			//获取高度
			getdivHeight(){
				let idvcheight = this.$refs.divForm.clientHeight
				let asda  = idvcheight + 32
				this.tableHeight = { 'height':`calc(100% - ${asda +'px'})` }   
			}
		}
	}
</script>

<style>